<template>
	<text class="iconfont icon-xiangzuojiantou"></text>
	<view class="header">
		<text>订单详情</text>
	</view>
	<view class="my-order">
		<view class="title">
			<text style="margin-right: 10rpx;">我的订单：{{order.order.area}}</text>
			<!-- <text>12号桌</text> -->
		</view>
		<view class="order-time">
			<view class="order-state">
				<text>订单未开始</text>
				<button @click="editFn">改签</button>
			</view>
			<view class="time">
				<text>开始时间：{{timeFn(order.order.startTime)}}</text>
				<text>结束时间：{{timeFn(order.order.endTime)}}</text>
				<text>下单时间：{{timeFn(order.order.createTime)}}</text>
			</view>
		</view>
	</view>
	<view class="footer">Tips:请提前5分钟到达自习室即可，太早了没位置哦！</view>
</template>

<script setup>
	import {onMounted, reactive} from 'vue'
	import store from '../../store/index.js'
	let order=reactive({order:{}});
	onMounted(()=>{
		console.dir(JSON.parse(JSON.stringify(store.state.order)))
		order.order=JSON.parse(JSON.stringify(store.state.order))
	})
	let timeFn=function(time){
		return time+'（'+'周'+'日一二三四五六'.charAt(new Date(time).getDay())+'）'
	};
	let editFn=function(){
		uni.navigateTo({
			url:'/pages/SeatChange/SeatChange',
		})
	}
</script>

<style lang="less" scoped>
	@import url("../../static/fonts/iconfont.css");
	.icon-xiangzuojiantou{
		font-size: 32rpx;
		font-weight: bolder;
		position: fixed;
		top: 24rpx;
		left: 30rpx;
	}
	.header{
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 32rpx;
		border-bottom: 1px solid #eee;
	}
	.my-order{
		margin: 32rpx 40rpx 40rpx 40rpx;
		& .title{
			font-size: 28rpx;
			font-weight: bolder;
			padding: 20rpx 0;
		}
		& .order-time{
			height: 310rpx;
			background: #f7efe5;
			border-radius: 10rpx;
			padding-top: 16rpx;
			& .order-state{
				height: 76rpx;
				padding-left: 20rpx;
				padding-right: 46rpx;
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #c6964f;
				& button{
					width: 150rpx;
					height: 50rpx;
					border-radius: 25rpx;
					padding: 0;
					margin: 0;
					font-size: 28rpx;
					line-height: 50rpx;
					background: #c99b57;
					color: #fff;
				}
			}
			& .time{
				height: 142rpx;
				padding: 42rpx 0 0 20rpx;
				font-size: 28rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
		}
	}
	.footer{
		background: #f2f2f2;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 26rpx;
		font-weight: lighter;
	}
</style>
